<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>蜻蜓站点</title>

<link type="text/css" href="./css/style_zd.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="./js/jquery.touchSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){

/* 	$(".main_visual").hover(function(){
		$("#btn_prev,#btn_next").fadeIn()
	},function(){
		$("#btn_prev,#btn_next").fadeOut()
	}); */
	
	$dragBln = false;
	
	$(".main_image").touchSlider({
		flexible : true,
		speed : 200,
		btn_prev : $("#btn_prev"),
		btn_next : $("#btn_next"),
		paging : $(".flicking_con a"),
		counter : function (e){
			$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
		}
	});
	
	$(".main_image").bind("mousedown", function() {
		$dragBln = false;
	});
	
	$(".main_image").bind("dragstart", function() {
		$dragBln = true;
	});
	
	$(".main_image a").click(function(){
		if($dragBln) {
			return false;
		}
	});
	
	timer = setInterval(function(){
		$("#btn_next").click();
	}, 5000);
	
	$(".main_visual").hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		},5000);
	});
	
	$(".main_image").bind("touchstart",function(){
		clearInterval(timer);
	}).bind("touchend", function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		}, 5000);
	});
	
});
</script>
</head>
<body>
<div class="head">轻轻停</div>
<div class="main_visual">
	<div class="flicking_con">
		<a href="http://123.59.40.161/station.html#" class="">1</a>
		<a href="http://123.59.40.161/station.html#" class="">2</a>
		<a href="http://123.59.40.161/station.html#" class="">3</a>
		<a href="http://123.59.40.161/station.html#" class="">4</a>
		<a href="http://123.59.40.161/station.html#" class="">5</a>
		<a href="http://123.59.40.161/station.html#" class="">6</a>
		<a href="http://123.59.40.161/station.html#" class="">7</a>
		<a href="http://123.59.40.161/station.html#" class="">8</a>
		<a href="http://123.59.40.161/station.html#" class="">9</a>
		<a href="http://123.59.40.161/station.html#" class="">10</a>
		<a href="http://123.59.40.161/station.html#" class="">11</a>
		<a href="http://123.59.40.161/station.html#" class="">12</a>
		<a href="http://123.59.40.161/station.html#" class="">13</a>
		<a href="http://123.59.40.161/station.html#" class="on">14</a>
	</div>
	<div class="main_image">
		<ul style="width: 320px; overflow: visible; height: 441px;">
			<!--<li><span class="img_3"></span></li>
			<li><span class="img_4"></span></li>
			<li><span class="img_1"></span></li>
			<li><span class="img_2"></span></li>
			<li><span class="img_5"></span></li>-->
            <li style="float: none; display: block; position: absolute; top: 0px; left: -4654px; width: 358px;"><img src="./images/banner_reishui.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -4296px; width: 358px;"><img src="./images/Advertisement003.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -3938px; width: 358px;"><img src="./images/Advertisement004.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -3580px; width: 358px;"><img src="./images/banner_yayao.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -3222px; width: 358px;"><img src="./images/Advertisement001.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -2864px; width: 358px;"><img src="./images/Advertisement002.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -2506px; width: 358px;"><img src="./images/banner_wayaogang.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -2148px; width: 358px;"><img src="./images/banner_longkou.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -1790px; width: 358px;"><img src="./images/banner_kuidong.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -1432px; width: 358px;"><img src="./images/banner_yangxi.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -1074px; width: 358px;"><img src="./images/banner_dinghu.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -716px; width: 358px;"><img src="./images/banner_shaoguandong.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: -358px; width: 358px;"><img src="./images/banner_danxia.png" width="100%"></li>
            <li style="float: none; display: block; position: absolute; top: 0px; left: 0px; width: 358px;"><img src="./images/banner_zhujixiang.png" width="100%"></li>

		</ul>
		<a href="javascript:;" id="btn_prev" style="width: 320px; overflow: visible; height: 441px;"></a>
		<a href="javascript:;" id="btn_next" style="width: 320px; overflow: visible; height: 441px;"></a>
	</div>
    <div class="footer">
		<a href="javascript:history.go(-1);">返回</a>
	</div>
</div>
<!--main_visual end-->


</body></html>
